<template>
  <router-view name="orther" v-if="isShowPlay" />
  <div id="index" v-if="!isShowPlay">
    <Header></Header>
    <router-view name="index" />
    <Footer></Footer>
    <offset-action></offset-action>
  </div>
</template>

<script>
import {onBeforeMount,reactive,toRefs} from 'vue'
import Header from './header/index'
import Footer from './footer/index'
export default {
    name:"Index",
    components: {
        Header,Footer
    },
    setup(){
      const state = reactive({
                isShowPlay:false,
            });

        onBeforeMount(()=>{
            gethref();
        })
        /**
         * 获取url地址
         */
        const gethref = ()=>{
            let href = window.location.pathname;
            if(href && href === '/player' || href.toLowerCase() === '/test'|| href.toLowerCase() === '/search'){
                state.isShowPlay = true;
            }
        }
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
#index {
  width: 100%;
  min-width: $mgBodyMinWidth;

  #offsetAction {
    right: 0px;
    bottom: 55px;
    opacity: 1;
  }

  .scrollbar {
    &::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: #f5f5f5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px $ThemeColorTran;
      -webkit-box-shadow: inset 0 0 6px $ThemeColorTran;
      border-radius: 10px;
      background-color: #f5f5f5;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 6px $ThemeColorTran;
      -webkit-box-shadow: inset 0 0 6px $ThemeColorTran;
      //   background-color: #c8c8c8;
    }
  }
}
</style>